<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://hk.hnshengzhong.cn/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="https://hk.hnshengzhong.cn/app/admin/admin/css/reset.css"/>
    <link rel="stylesheet" href="https://hk.hnshengzhong.cn/app/admin/demos/css/console2.css"/>
</head>
<body class="pear-container">
<style>
    .list .list-item {
        height: 31.8px;
        line-height: 31.8px;
        color: gray;
        padding: 5px;
        padding-left: 15px;
        border-radius: 4px;
        margin-top: 5.2px;
    }

    .list .list-item:hover {
        background-color: whitesmoke;
    }

    .active{
        background-color: whitesmoke;
    }

    .list .list-item .title {
        font-size: 13px;
        width: 100%;
    }

    .list .list-item .footer {
        position: absolute;
        right: 30px;
        font-size: 12px;
    }
</style>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">账号信息</div>
            <div class="layui-card-body" id="view"></div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header" id="title">

                    </div>
                    <div class="layui-card-body" id="basicData">

                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-line" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-columnar" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-pie" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://hk.hnshengzhong.cn/app/admin/component/layui/layui.js"></script>
<script src="https://hk.hnshengzhong.cn/app/admin/component/pear/pear.js"></script>
<script src="https://hk.hnshengzhong.cn/app/admin/admin/js/permission.js"></script>
<script src="https://hk.hnshengzhong.cn/app/admin/admin/js/common.js"></script>
<script src="https://hk.hnshengzhong.cn/admin/js/common.js"></script>
<script>
    // 相关常量
    const SELECT_API = "https://hk.hnshengzhong.cn/admin/account/select";
    const DATA_API = "https://hk.hnshengzhong.cn/admin/account/";

    layui.use(['layer', 'echarts', 'carousel', 'element', 'table', 'util', 'laytpl'], function () {
        let $ = layui.jquery,
            http = layui.$,
            layer = layui.layer,
            element = layui.element,
            echarts = layui.echarts,
            table = layui.table,
            util = layui.util,
            laytpl = layui.laytpl,
            carousel = layui.carousel;

        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];

        util.event('lay-active', {
            getData: function (row) {
                getData(row.context.getAttribute('data-id'))
            }
        })

        let lineChart = echarts.init(document.getElementById('echarts-line'));
        let columnarChart = echarts.init(document.getElementById('echarts-columnar'));
        let pieChart = echarts.init(document.getElementById('echarts-pie'))
        getAccountInfo()

        /**
         * request
         */
        function getData(id) {
            let requestList = ['get', 'fee', 'dailyPnl', 'months']
            $('#demo_1').removeClass('active')
            requestList.forEach(item => {
                http.ajax({
                    url: `${DATA_API}${item}`,
                    type: "get",
                    headers: {
                        token: '02f12e48da12d94194180af38dc2a241',
                    },
                    data: {id: id},
                    success: function (res) {
                        if (res.code === 0) {
                            switch (item) {
                                case 'get':
                                    setBasicData(res)
                                    break;
                                case 'fee':
                                    setFee(res)
                                    break;
                                case 'dailyPnl':
                                    setDailyPnl(res)
                                    break;
                                case 'months':
                                    setMonths(res)
                                    break;
                                default:
                                    break;
                            }
                        }
                    }
                })
            })

        }

        /**
         * 账号信息
         */
        function getAccountInfo() {
            http.ajax({
                url: SELECT_API,
                type: "get",
                headers: {
                    token: '02f12e48da12d94194180af38dc2a241',
                },
                success: function (res) {
                    const id = '#demo_' + res.data[0].id
                    getData(res.data[0].id)
                    let getTpl = demo.innerHTML, view = document.getElementById('view');
                    laytpl(getTpl).render(res, function (html) {
                        view.innerHTML = html;
                        $(id).addClass('active')
                    });
                }
            })
        }

        /**
         * 基础数据
         */
        function setBasicData(res) {
            const resData = res.data
            let getTpl = basic.innerHTML, view = document.getElementById('basicData');
            laytpl(getTpl).render(res.data, function (html) {
                view.innerHTML = html;
            });
            $('#title').html("账号 :" + resData.title)
        }

        /**
         * 南丁格尔玫瑰图
         */
        function setFee(data) {
            let pie_option;
            pie_option = {
                title: {
                    text: data.data.note,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    data: data.data.dimensions
                },
                toolbox: {
                    show: true
                },
                series: [
                    {
                        name: '支出类型',
                        type: 'pie',
                        radius: [20, 100],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: data.data.source.map(item => {
                            item.value = item.data.toFixed(2)
                            item.name = item.type
                            return item
                        })
                    }
                ]
            }

            pie_option && pieChart.setOption(pie_option);
        }

        /**
         * 柱状图
         */
        function setDailyPnl(data) {

            let columnar_option;

            columnar_option = {
                title: {
                    text: '每日数据',
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: {},
                xAxis: {
                    type: 'category',
                    data: data.data.source.map(item => item.total_date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "收益",
                        data: data.data.source.map(item => item.total_pnl),
                        type: 'bar',
                        itemStyle: {
                            color: color[0],
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    },
                    {
                        name: "费用",
                        data: data.data.source.map(item => item.total_fee),
                        type: 'bar',
                        itemStyle: {
                            color: color[1],
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };

            columnar_option && columnarChart.setOption(columnar_option);
        }

        /**
         * request: 折线图
         */
        function setMonths(data) {
            let line_option;
            line_option = {
                title: {
                    text: '每月收益'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {},
                grid: {
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.data.source.map(item => item.months)
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '费用',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.data.source.map(item => item.total_fee.toFixed(2))
                    },
                    {
                        name: '收益',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.data.source.map(item => item.total_pnl.toFixed(2))
                    }
                ]
            };

            line_option && lineChart.setOption(line_option)
        }


        window.onresize = function () {
            lineChart.resize();
            columnarChart.resize()
            pieChart.resize()
        }

    });
</script>

<script id="demo" type="text/html">
    <ul class="list">
        {{# layui.each(d.data, function(index, item){ }}
        <li id="demo_{{item.id}}" class="list-item"  data-id="{{item.id}}" lay-active="getData"><span class="title">{{item.title}}</span><span
                class="footer">{{item.update_time}}</span></li>
        {{# }); }}
    </ul>
</script>

<script id="basic" type="text/html">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">平台收益</div>
                    <div class="count pear-text">{{(d.eq - d.init_eq).toFixed(2)}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">币种总权益</div>
                    <div class="count pear-text">{{parseFloat(d.eq).toFixed(2)}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">占用金额</div>
                    <div class="count pear-text">{{parseFloat(d.frozen_bal - d.upl).toFixed(2)}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">可用保证金</div>
                    <div class="count pear-text">{{parseFloat(d.avail_eq).toFixed(2)}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">保证金率</div>
                    <div class="count pear-text">{{parseFloat(d.mgn_ratio).toFixed(2) + "%"}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">更新时间</div>
                    <div class="count pear-text" style="font-size: 16px">{{d.update_time}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">资金收益率</div>
                    <div class="count pear-text">{{parseFloat(d.init_eq_ratio * 100).toFixed(2) + "%"}}</div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                <div class="pear-card2">
                    <div class="title">实际收益率</div>
                    <div class="count pear-text">{{parseFloat(d.max_frozen_bal_ratio * 100).toFixed(2) + "%"}}</div>
                </div>
            </div>
        </div>
</script>

</body>
</html>
